<html>
<head>
    <meta charset="utf-8">
    <title>商品添加</title>
    <#assign base=request.contextPath  />
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/backstage/layui/css/layui.css" media="all">
    <script src="${base}/backstage/layui/layui.js"></script>
    <script src="${base}/backstage/wangEdit/wangEditor.js"></script>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js"></script>
    <script>
        var base =  "${base}";
    </script>
    <script src="${base}/backstage/js/ipNameUrl.js"></script>
</head>
<body>
<form class="layui-form " action="" style="padding-left: 15px;">
<br>
<br>
    <div class="layui-upload" style="position: relative;left:7%;width: 93%">
        <button type="button" class="layui-btn" id="test2">上传商品图片</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote>
    </div>
    <br>
    <br>


    <div class="layui-form-item">
        <label class="layui-form-label">暂定单价</label>
        <div class="layui-input-block">
            <input class="layui-input" name="provisionalPrice" onchange="zan(this.id)" id="provisionalPrice" placeholder="请输入暂定商品单价,如是整数 20.00" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input class="layui-input" name="goodName" id="goodName" placeholder="请输入商品名称" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品来源</label>
        <div class="layui-input-block">
            <input class="layui-input" name="source" id="source" placeholder="请输入商品来源" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">来源链接</label>
        <div class="layui-input-block">
            <input class="layui-input" name="url" id="url" placeholder="请输入商品来源链接" autocomplete="off">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品盈利</label>
        <div class="layui-input-block">
            <input class="layui-input" name="profit" id="profit" disabled value="商品盈利是暂定商品单价的7%" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">销售盈利</label>
        <div class="layui-input-block">
            <input class="layui-input" name="saleProfit" id="saleProfit" disabled value="销售盈利是暂定商品单价的8%" autocomplete="off">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品单价</label>
        <div class="layui-input-block">
            <input class="layui-input" name="goodPrice" disabled id="goodPrice" placeholder="请输入商品单价" autocomplete="off">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品分类</label>
        <div class="layui-input-block">
            <select name="modules" id="commodityId" lay-verify="required" lay-search="" lay-filter="commodityId">
                <option value="">直接选择商品分类</option>
                <#list commodityClassification as commodityClassification>
                    <option value="${commodityClassification.id}">${commodityClassification.name}</option>
                </#list>

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
            <select name="modules" id="classificationId" lay-verify="required" lay-filter="classificationId" lay-search="">
            </select>
        </div>
    </div>

    <!--规格-->
    <div class="layui-collapse" lay-accordion="" >
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">规格大小</h2>
            <div class="layui-colla-content layui-show">
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>




    <div class="layui-form-item">
        <label class="layui-form-label">是否包邮</label>
        <div class="layui-input-block">
            <select name="modules" id="freeShipping" lay-verify="required" lay-search="">
                <option value="1">是</option>
                <option value="2">否</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否下架</label>
        <div class="layui-input-block">
            <select name="modules" id="businesses" lay-verify="required" lay-search="">
                <option value="1">是</option>
                <option value="2">否</option>
            </select>
        </div>
    </div>
<br>
<br>
    <div class="layui-upload"  style="position: relative;left:7%;width: 93%">
        <button type="button" class="layui-btn" id="test3">上传商品详情</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo3"></div>
        </blockquote>
    </div>
    <br>
    <br>
    <div class="layui-form-item">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-block">
            <textarea class="layui-input" name="goodContent" id="goodContent" style="height: 100px" placeholder="请输入商品描述" autocomplete="off"></textarea>
        </div>
    </div>

<br>
<br>
    <div align="center">
        <button type="button" class="layui-btn" id="saveButton">保存</button>
        <button type="button" class="layui-btn" onclick="window.history.back(-1);">返回</button>
    </div>
    <br>
    <br>
</form>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo" >
    <form class="layui-form " action="" >
        <div class="layui-form-item">
            <label class="layui-form-label">颜色</label>
            <div class="layui-input-block">
                <input class="layui-input" name="color" id="color"  placeholder="请输入颜色" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">规格大小</label>
            <div class="layui-input-block">
                <select name="modules" id="size" lay-verify="required" lay-search="">
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-event="add">添加大小规格</button>
            </div>
        </div>
    </form>
</script>
</body>

<script>
    var goodImage = "";
    var goodDetails = "";
    var form;
    layui.use(['table', 'form', 'layedit', 'laydate', 'layer','element','upload'], function () {
        form = layui.form
        var table = layui.table
            , $ = layui.jquery
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            ,upload = layui.upload
            ,element = layui.element
            , layer = layui.layer;


        table.render({
            skin: 'line' //行边框风格
            , even: true //开启隔行背景
            , elem: '#test'
            , toolbar: '#toolbarDemo'
            ,data:[]
            , cols: [[
                {field: 'size', title: '规格大小',align: 'center'},
                {field: 'color', title: '颜色',align: 'center'},
                {field: '', title: '操作',toolbar: '#barDemo',align: 'center'},
            ]]
            , id: 'testReload'
            ,limits:[999999]
            ,limit:999999
        });
        //添加表格
        table.on('toolbar(test)', function (obj) {
            selectSize($("#commodityId").val(),$("#classificationId").val());
            switch (obj.event) {
                case 'add':
                    if($("#size").val()==""){
                        layer.msg("规格大小不能为空")
                        return
                    }
                    if($("#color").val()==""){
                        layer.msg("颜色不能为空")
                        return
                    }
                    var sizeClassification = $("#size").val();
                    var str = sizeClassification.split(",");
                    var id = "";
                    var size = "";
                    for (let i = 0; i < str.length-1; i++) {
                        id = str[0]
                        size = str[1]
                    }

                    var prodJson = {
                        size:size,
                        color:$("#color").val(),
                        sizeId:size
                    }
                    layui.table.cache.testReload.push(prodJson);
                    table.reload('testReload',{
                        data: layui.table.cache.testReload
                    });
                    break;

            };

        });
        //删除数据
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定删除吗？', function(index){
                    obj.del();
                    layer.close(index);
                });
            }
        });


        layui.form.on('select(commodityId)', function(data) {
            var commodityId =  data.value;
            $.ajax({
                type: "GET",
                url: "${base}/admin/public/selectClassifitcation",
                dataType: "json",
                data:{id:commodityId},
                success: function (data) {
                    if(data.code==200){
                        $("#classificationId").html("")
                        $("#classificationId").append(
                            ' <option value=""  >直接选择分类名称</option>'
                        )
                        for (var i = 0; i < data.data.length; i++) {
                            $("#classificationId").append(
                                ' <option value="' + data.data[i].id+ '"  >' + data.data[i].name + '</option>'
                            )

                        }
                        layui.form.render(); //更新全部
                    }

                }
            });
        });
        //根据分类名称和商品分类查询规格大小
        layui.form.on('select(classificationId)', function(data) {
            var classificationId =  data.value;
            var commodityId = $("#commodityId").val();
            if(commodityId==""){
                layer.msg("请选择商品分类")
                return;
            }
            selectSize(commodityId,classificationId)
        });
        var loadIndex;
        //多图片下传
        upload.render({
            elem: '#test2'
            ,url: '${base}/admin/file/uploadFile' //改成您自己的下传接口
            ,multiple: true
            ,before: function(obj){
               loadIndex = layer.load(3, { shade: [0.5, '#696969'],offset: ['50%', "50%"] });
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 200px;height: 200px">')
                });
            }
            ,done: function(res){
                layer.closeAll('loading'); //关闭loading
                goodImage+=res.data+";";
                //上传完毕
            }
        });
        upload.render({
            elem: '#test3'
            ,url: '${base}/admin/file/uploadFile' //改成您自己的下传接口
            ,multiple: true
            ,before: function(obj){
                loadIndex = layer.load(3, { shade: [0.5, '#696969'],offset: ['50%', "50%"]  });
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo3').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 200px;height: 200px">')
                });
            }
            ,done: function(res){
                layer.closeAll('loading'); //关闭loading
                goodDetails+=res.data+";";
                //上传完毕
            }
        });


    })

    function zan(id){
        //判断是否是小数
        var regex=/^\d+\.\d+$/;
        if (regex.test($("#provisionalPrice").val())==false) {
            layer.msg("暂定商品单价为小数！")
            return;
        }
        if($("#provisionalPrice").val()==""){
            layer.msg("请先填暂定单价")
            $("#goodPrice").val("");
            return
        }else{
            var provisionalPrice = $("#"+id+"").val();
            if(provisionalPrice!=""){
                //计算商品单价
                var fei = parseFloat(provisionalPrice)*parseFloat(0.07);
                var profit = fei.toFixed(2);
                $("#profit").val(profit);
                var fei1 = parseFloat(provisionalPrice)*parseFloat(0.08);
                var profit1 = fei1.toFixed(2);
                $("#saleProfit").val(profit1);
                var goodPrice = parseFloat(provisionalPrice)+parseFloat(profit)+parseFloat(profit1);
                $("#goodPrice").val(goodPrice.toFixed(2));
            }
        }
    }

    function selectSize(commodityId,classificationId){
        $.ajax({
            type: "GET",
            url: "${base}/admin/public/selectSize",
            dataType: "json",
            data:{commodityId:commodityId,classificationId:classificationId},
            success: function (data) {
                if(data.code==200){
                    $("#size").html("")
                    $("#size").append(
                        ' <option value=""  >直接选择规格大小</option>'
                    )
                    for (var i = 0; i < data.data.length; i++) {
                        $("#size").append(
                            ' <option value="' + data.data[i].id+","+data.data[i].size+ '"  >' + data.data[i].size + '</option>'
                        )
                    }
                    layui.form.render(); //更新全部
                }
            }
        });
    }

    $("#saveButton").on("click", function () {


        if(goodImage==""){
            layer.msg("请下传商品图片！")
            return;
        }
        if ($("#goodName").val()=="") {
            layer.msg("请填写商品名称！")
            return;
        }
        if ($("#source").val()=="") {
            layer.msg("请填写商品来源！")
            return;
        }

        if ($("#goodPrice").val()=="") {
            layer.msg("请填写商品单价！")
            return;
        }
        var regex=/^\d+\.\d+$/;
        if (regex.test($("#goodPrice").val())==false) {
            layer.msg("商品单价为小数！")
            return;
        }
        if ($("#commodityId").val()=="") {
            layer.msg("请填写商品分类！")
            return;
        }
        if ($("#classificationId").val()=="") {
            layer.msg("请填写分类名称！")
            return;
        }
        if(goodDetails==""){
            layer.msg("请下传商品详情！")
            return;
        }
        if ($("#goodContent").val()=="") {
            layer.msg("请填写商品描述！")
            return;
        }
        var formDate = {
            goodName: $("#goodName").val(),
            source: $("#source").val(),
            url: $("#url").val(),
            goodPrice: $("#goodPrice").val(),
            commodityId: $("#commodityId").val(),
            classificationId: $("#classificationId").val(),
            goodContent: $("#goodContent").val(),
            profit: $("#profit").val(),
            freeShipping: $("#freeShipping").val(),
            provisionalPrice: $("#provisionalPrice").val(),
            saleProfit: $("#saleProfit").val(),
            businesses: $("#businesses").val(),
            goodImage:goodImage,
            goodDetails:goodDetails,
            prods:JSON.stringify(layui.table.cache.testReload),
        }

        $.ajax({
            type: "POST",
            url: "${base}/admin/good/save",
            data: formDate,
            success: function (data) {
                if (data.code === 200) {
                    layer.msg(data.msg)
                    window.location.href = "${base}/admin/good/good.html"
                } else {
                    layer.msg(data.msg)
                }
            }
        });
    })
</script>
</html>


